<template>
  <div>
    <div class="top-box">
      <!--<el-button type="success" @click="add">添加会议申请</el-button>-->
    </div>
    <loading v-if="loading"></loading>
    <div class="pd" v-else>
      <div class="search-box">
        <el-input v-model="searchParam.id" placeholder="请输入编号" class="user-input"></el-input>
        <el-input v-model="searchParam.name" placeholder="请输入联系人" class="user-input"></el-input>
        <el-input v-model="searchParam.id_card_no" placeholder="请输入证件号" class="user-input"></el-input>
        <el-button type="primary" class="el-icon-search" @click="search">搜索</el-button>
        <el-button class="el-icon-q" @click="cancel">撤销</el-button>
      </div>

      <el-table :data="listData.list" border fit highlight-current-row style="width:100%">
        <el-table-column label="编号" prop="id"></el-table-column>
        <el-table-column label="联系人" prop="name"></el-table-column>
        <el-table-column label="性别" prop="sex"></el-table-column>
        <el-table-column label="国籍" prop="country"></el-table-column>
        <el-table-column label="证件类型" prop="id_card_type"></el-table-column>
        <el-table-column label="证件号" prop="id_card_no"></el-table-column>
        <el-table-column label="所属机构" prop="organ"></el-table-column>
        <el-table-column label="职位" prop="position"></el-table-column>
        <el-table-column label="联系电话" prop="phone"></el-table-column>
        <el-table-column label="邮箱" prop="email"></el-table-column>
        <el-table-column label="注册编码" prop="reg_code"></el-table-column>
        <el-table-column label="照片">
          <template scope="scope">
            <img :src="scope.row.photo" class="art-cover" @click="previewImg(scope.row.photo)" v-if="scope.row.photo.length > 0">
          </template>
        </el-table-column>
        <el-table-column label="名片">
          <template scope="scope">
            <img :src="scope.row.busi_card" class="art-cover" @click="previewImg(scope.row.busi_card)" v-if="scope.row.busi_card.length > 0">
          </template>
        </el-table-column>
        <!--<el-table-column label="是否发言" prop="will_speak"></el-table-column>
        <el-table-column label="简历">
          <template scope="scope">
            <a  target="_blank" :href="scope.row.resume" v-if="scope.row.resume.length !== 0">
              <span class="a-inner"  >&lt;!&ndash;<i class="el-icon-document"></i>&ndash;&gt;查看简历</span>
            </a>
          </template>
        </el-table-column>-->
        <el-table-column label="参会场次" prop="conference"></el-table-column>
        <el-table-column label="状态" prop="status"></el-table-column>
        <el-table-column label="提交时间" prop="add_time"></el-table-column>
        <el-table-column label="操作">
          <template scope="scope">
            <!--<i class="i-icon icon-revamp" title="修改"  @click="edit(scope.row)"></i>-->
            <i class="i-icon icon-delete" title="删除"  @click="remove(scope.row.id)"></i>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          @current-change="handleChange"
          :current-page.sync="pageall"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="listData.total">
        </el-pagination>
        <el-dialog
          title="查看封面图"
          :visible.sync="imgVisible"
          size="tiny">
          <img :src="imgUrl" style="width:100%">
        </el-dialog>
      </div>
    </div>
    <el-dialog title="添加会议申请" :visible.sync="showAddModelFlag" size="tiny">
      <div class="input-group">
        <label><i>*</i>联系人：</label>
        <div class="input-group-box"><el-input v-model="addParam.name" placeholder="请输入联系人"></el-input></div>
      </div>
	    <div class="input-group">
        <label><i>*</i>性别：</label>
        <div class="input-group-box"><el-input v-model="addParam.sex" placeholder="请输入性别"></el-input></div>
      </div>
	    <div class="input-group">
        <label><i>*</i>国籍：</label>
        <div class="input-group-box"><el-input v-model="addParam.country" placeholder="请输入国籍"></el-input></div>
      </div>
	    <div class="input-group">
        <label><i>*</i>证件类型：</label>
        <div class="input-group-box"><el-input v-model="addParam.id_card_type" placeholder="请输入证件类型"></el-input></div>
      </div>
	    <div class="input-group">
        <label><i>*</i>证件号：</label>
        <div class="input-group-box"><el-input v-model="addParam.id_card_no" placeholder="请输入证件号"></el-input></div>
      </div>
	    <div class="input-group">
        <label><i>*</i>所属机构：</label>
        <div class="input-group-box"><el-input v-model="addParam.organ" placeholder="请输入所属机构"></el-input></div>
      </div>
	    <div class="input-group">
        <label><i>*</i>职位：</label>
        <div class="input-group-box"><el-input v-model="addParam.position" placeholder="请输入职位"></el-input></div>
      </div>
	    <div class="input-group">
        <label><i>*</i>联系电话：</label>
        <div class="input-group-box"><el-input v-model="addParam.phone" placeholder="请输入联系电话"></el-input></div>
      </div>
	    <div class="input-group">
        <label><i>*</i>邮箱：</label>
        <div class="input-group-box"><el-input v-model="addParam.email" placeholder="请输入邮箱"></el-input></div>
      </div>
	    <div class="input-group">
        <label><i>*</i>照片：</label>
        <div class="input-group-box"><el-input v-model="addParam.photo" placeholder="请输入照片"></el-input></div>
      </div>
	    <div class="input-group">
        <label><i>*</i>名片：</label>
        <div class="input-group-box"><el-input v-model="addParam.busi_card" placeholder="请输入名片"></el-input></div>
      </div>
	    <div class="input-group">
        <label><i>*</i>是否发言：</label>
        <div class="input-group-box"><el-input v-model="addParam.will_speak" placeholder="请输入是否发言"></el-input></div>
      </div>
	    <div class="input-group">
        <label><i>*</i>参会场次：</label>
        <div class="input-group-box"><el-input v-model="addParam.conference_ids" placeholder="请输入参会场次"></el-input></div>
      </div>
	    <div class="input-group">
        <label><i>*</i>状态：</label>
        <div class="input-group-box"><el-input v-model="addParam.status" placeholder="请输入状态"></el-input></div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showAddModelFlag = false">取 消</el-button>
        <el-button type="primary" @click="confirmAdd">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改会议申请" :visible.sync="showUpdateModelFlag" size="tiny">
      <div class="input-group">
        <label><i>*</i>联系人：</label>
        <div class="input-group-box"><el-input v-model="editParam.name" placeholder="请输入联系人"></el-input></div>
      </div>
	    <div class="input-group">
        <label><i>*</i>性别：</label>
        <div class="input-group-box"><el-input v-model="editParam.sex" placeholder="请输入性别"></el-input></div>
      </div>
	    <div class="input-group">
        <label><i>*</i>国籍：</label>
        <div class="input-group-box"><el-input v-model="editParam.country" placeholder="请输入国籍"></el-input></div>
      </div>
	    <div class="input-group">
        <label><i>*</i>证件类型：</label>
        <div class="input-group-box"><el-input v-model="editParam.id_card_type" placeholder="请输入证件类型"></el-input></div>
      </div>
	    <div class="input-group">
        <label><i>*</i>证件号：</label>
        <div class="input-group-box"><el-input v-model="editParam.id_card_no" placeholder="请输入证件号"></el-input></div>
      </div>
	    <div class="input-group">
        <label><i>*</i>所属机构：</label>
        <div class="input-group-box"><el-input v-model="editParam.organ" placeholder="请输入所属机构"></el-input></div>
      </div>
	    <div class="input-group">
        <label><i>*</i>职位：</label>
        <div class="input-group-box"><el-input v-model="editParam.position" placeholder="请输入职位"></el-input></div>
      </div>
	    <div class="input-group">
        <label><i>*</i>联系电话：</label>
        <div class="input-group-box"><el-input v-model="editParam.phone" placeholder="请输入联系电话"></el-input></div>
      </div>
	    <div class="input-group">
        <label><i>*</i>邮箱：</label>
        <div class="input-group-box"><el-input v-model="editParam.email" placeholder="请输入邮箱"></el-input></div>
      </div>
	    <div class="input-group">
        <label><i>*</i>照片：</label>
        <div class="input-group-box"><el-input v-model="editParam.photo" placeholder="请输入照片"></el-input></div>
      </div>
	    <div class="input-group">
        <label><i>*</i>名片：</label>
        <div class="input-group-box"><el-input v-model="editParam.busi_card" placeholder="请输入名片"></el-input></div>
      </div>
	    <div class="input-group">
        <label><i>*</i>是否发言：</label>
        <div class="input-group-box"><el-input v-model="editParam.will_speak" placeholder="请输入是否发言"></el-input></div>
      </div>
	    <div class="input-group">
        <label><i>*</i>参会场次：</label>
        <div class="input-group-box"><el-input v-model="editParam.conference_ids" placeholder="请输入参会场次"></el-input></div>
      </div>
	    <div class="input-group">
        <label><i>*</i>状态：</label>
        <div class="input-group-box"><el-input v-model="editParam.status" placeholder="请输入状态"></el-input></div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="showUpdateModelFlag = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import apiConfig from '../../../utils/apiconfig'
import api from '../../../utils/api'
import helper from '../../../utils/helper'
import loading from '../../../components/loading'
export default {
  data () {
    return {
      listData: [],
      pageSize: 20,
      pageall: 1,
      page: 1,
      loading: true,
      showAddModelFlag: false,
      showUpdateModelFlag: false,
      imgUrl: '',
      imgVisible: false,
      searchParam: {
        id: '',
        name: '',
        sex: '',
        id_card_type: '',
        id_card_no: '',
        organ: '',
        position: '',
        phone: '',
        email: '',
        photo: '',
        busi_card: '',
        will_speak: '',
        conference_ids: '',
        status: ''
      },
      addParam: {
        name: '',
        sex: '',
        country: '',
        id_card_type: '',
        id_card_no: '',
        organ: '',
        position: '',
        phone: '',
        email: '',
        photo: '',
        busi_card: '',
        will_speak: '',
        conference_ids: '',
        status: ''
      },
      editParam: {
        id: '',
        name: '',
        sex: '',
        country: '',
        id_card_type: '',
        id_card_no: '',
        organ: '',
        position: '',
        phone: '',
        email: '',
        photo: '',
        busi_card: '',
        will_speak: '',
        conference_ids: '',
        status: ''
      }
    }
  },
  created () {
    this.getList()
  },
  components: {
    loading
  },
  methods: {
    getSearchParam () { // 参数
      var param = {
        page: this.page,
        id: this.searchParam.id,
        name: this.searchParam.name,
        sex: this.searchParam.sex,
        id_card_type: this.searchParam.id_card_type,
        id_card_no: this.searchParam.id_card_no,
        organ: this.searchParam.organ,
        position: this.searchParam.position,
        phone: this.searchParam.phone,
        email: this.searchParam.email,
        photo: this.searchParam.photo,
        busi_card: this.searchParam.busi_card,
        will_speak: this.searchParam.will_speak,
        conference_ids: this.searchParam.conference_ids,
        status: this.searchParam.status
      }
      this.params = param
    },
    getList () {
      this.getSearchParam()
      api.GET(helper.getManageApiUrl(apiConfig.conferenceApplyList), this.params, res => {
        this.listData = res
        this.loading = false
      }, res => {
        console.log(res)
      })
    },
    search () {
      this.getList()
    },
    cancel () {
      this.searchParam.name = ''
      this.searchParam.sex = ''
      this.searchParam.country = ''
      this.searchParam.id_card_type = ''
      this.searchParam.id_card_no = ''
      this.searchParam.organ = ''
      this.searchParam.position = ''
      this.searchParam.phone = ''
      this.searchParam.email = ''
      this.searchParam.photo = ''
      this.searchParam.busi_card = ''
      this.searchParam.will_speak = ''
      this.searchParam.conference_ids = ''
      this.searchParam.status = ''
    },
    handleChange (val) {
      this.page = val
      this.getList()
    },
    add () {
      this.showAddModelFlag = true
    },
    confirmAdd () {
      var param = {
        name: this.addParam.name,
        sex: this.addParam.sex,
        country: this.addParam.country,
        id_card_type: this.addParam.id_card_type,
        id_card_no: this.addParam.id_card_no,
        organ: this.addParam.organ,
        position: this.addParam.position,
        phone: this.addParam.phone,
        email: this.addParam.email,
        photo: this.addParam.photo,
        busi_card: this.addParam.busi_card,
        will_speak: this.addParam.will_speak,
        conference_ids: this.addParam.conference_ids,
        status: this.addParam.status
      }
      api.GET(helper.getManageApiUrl(apiConfig.addConferenceApply), param, res => {
        this.$notify({
          title: '成功',
          message: '添加成功',
          type: 'success',
          duration: 1500
        })
        this.addParam.name = ''
        this.addParam.sex = ''
        this.addParam.country = ''
        this.addParam.id_card_type = ''
        this.addParam.id_card_no = ''
        this.addParam.organ = ''
        this.addParam.position = ''
        this.addParam.phone = ''
        this.addParam.email = ''
        this.addParam.photo = ''
        this.addParam.busi_card = ''
        this.addParam.will_speak = ''
        this.addParam.conference_ids = ''
        this.addParam.status = ''
        this.showAddModelFlag = false
        this.getList()
      }, res => {
        this.$notify({
          title: '失败',
          message: res.msg,
          type: 'fail',
          duration: 1500
        })
      })
    },
    remove (id) {
      var param = {
        id: id
      }
      this.$confirm('确认要删除此条信息吗？')
      .then(_ => {
        api.GET(helper.getManageApiUrl(apiConfig.deleteConferenceApply), param, res => {
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 1500
          })
          this.getList()
        }, res => {
          this.$notify({
            title: '失败',
            message: '删除失败',
            type: 'error',
            duration: 1500
          })
        })
      })
      .catch(_ => {})
    },
    edit (item) {
      this.editParam.id = item.id
      this.editParam.name = item.name
      this.editParam.sex = item.sex
      this.editParam.country = item.country
      this.editParam.id_card_type = item.id_card_type
      this.editParam.id_card_no = item.id_card_no
      this.editParam.organ = item.organ
      this.editParam.position = item.position
      this.editParam.phone = item.phone
      this.editParam.email = item.email
      this.editParam.photo = item.photo
      this.editParam.busi_card = item.busi_card
      this.editParam.will_speak = item.will_speak
      this.editParam.conference_ids = item.conference_ids
      this.editParam.status = item.status
      this.showUpdateModelFlag = true
    },
    save () {
      api.GET(helper.getManageApiUrl(apiConfig.updateConferenceApply), this.editParam, res => {
        this.$notify({
          title: '成功',
          message: '修改成功',
          type: 'success',
          duration: 1500
        })
        this.showUpdateModelFlag = false
        this.getList()
      }, res => {
        this.$notify({
          title: '失败',
          message: '修改失败',
          type: 'error',
          duration: 1500
        })
      })
    },
    previewImg (cover) {
      this.imgUrl = cover
      this.imgVisible = true
    }
  }
}
</script>
<style>
 .search-box {
  font-size: 0;
  padding-bottom:10px;
 }
 .search-box .user-input{
   width: 197px;
   margin: 3px 2px;
 }
</style>

